<template>
  <div class="table-container">
    <!-- 数据表格 -->
    <el-table @selection-change="handleSelectionChange" @row-click="handleRowClick" ref="multipleTable" row-key="id" :data="userList" border style="width: 100%;" header-align="center">

      <!-- 多选框 -->
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>

      <!-- 序号列 -->
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      
      <!-- 组织名称列 -->
      <el-table-column prop="orgName" label="组织名称" align="center"></el-table-column>

      <!-- 用户名列 -->
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>

      <!-- 性别列 -->
      <el-table-column prop="sex" label="性别" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.sex === '1' ? '男' : '女' }}
        </template>
      </el-table-column>

      <!-- 邮箱列 -->
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column>

      <!-- 电话列 -->
      <el-table-column prop="telephone" label="电话" align="center"></el-table-column>

      <!-- 用户状态列 -->
      <el-table-column prop="userStatus" label="状态" align="center" width="100">
        <template slot-scope="scope">
          <span :class="getUserStatusClass(scope.row)">
            {{ formatUserStatus(scope.row) }}
          </span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="{ row }">
          <!-- 授权角色按钮 -->
          <el-button type="primary" icon="el-icon-setting" size="mini" @click="assignRoles(row)">授权角色</el-button>
          <!-- 修改按钮 -->
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="openEditDialog(row)">修改</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination background style="margin-top: 20px; text-align: center;" :current-page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" :pager-count="7" :page-sizes="[10, 20, 50]"
      @size-change="getPageList" @current-change="getPageList" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper,->,sizes,total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [], // 用户数据列表
      total: 0, // 数据总数
      queryParams: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示数量
      },
    };
  },
  mounted() {
    this.getPageList(); // 组件加载时获取数据
  },
  methods: {
    // 获取用户列表数据
    async getPageList() {
      try {
        const response = await this.$API.user.getPageUser(
          this.queryParams.pageNum,
          this.queryParams.pageSize
        );
        // 适配后端返回的数据格式
        if (response && response.data) {
          this.userList = response.data.list || []; // 用户数据
          this.total = response.data.total || 0; // 数据总数
        } else {
          this.$message.error("获取数据失败");
        }
      } catch (error) {
        this.$message.error("请求失败，请稍后再试");
        console.error("请求失败", error);
      }
    },

    // 格式化用户状态
    formatUserStatus(row) {
      return row.userStatus === 1 ? "正常" : "禁用";
    },

    // 返回状态的样式类
    getUserStatusClass(row) {
      return row.userStatus === 1 ? "status-success" : "status-failed";
    },

    // 选择变化时的处理
    handleSelectionChange(val) {
      console.log("选择的用户：", val);
    },

    // 行点击时的处理
    handleRowClick(row) {
      console.log("点击的行数据：", row);
    },

    // 打开修改对话框
    openEditDialog(row) {
      console.log("修改用户信息", row);
      // 打开修改用户的对话框，具体实现根据业务需求
    },

    // 删除用户
    async deleteUser(row) {
      try {
        this.$confirm('确定要删除用户 "' + row.userName + '" 吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const response = await this.$API.user.deleteUser(row.id);
          if (response.code === 200) {
            this.$message.success("删除成功");
            this.getPageList(); // 删除后重新获取数据
          } else {
            this.$message.error(response.msg || "删除失败");
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      } catch (error) {
        this.$message.error("删除失败，请稍后再试");
        console.error("删除失败", error);
      }
    },
    
    // 跳转到角色授权页面
    assignRoles(row) {
      this.$router.push({
        path: `/acl/user/auth/${row.id}`,
        query: { userName: row.userName }
      });
    },
  },
};
</script>

<style scoped>
.table-container {
  width: 100%;
}

.el-table {
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏边角 */
}

.el-table th {
  background-color: #9cbc5f; /* 表头背景色 */
  color: #ffffff; /* 表头文字色 */
  font-size: 16px;
}

.el-table tbody tr {
  font-size: 17px; /* 所有行统一字体大小 */
  font-weight: 500;
}

.el-table tbody tr:nth-child(odd) {
  background-color: #ffffff; /* 奇数行背景色 */
}

.el-table tbody tr:nth-child(even) {
  background-color: #f0fbe0; /* 偶数行背景色 */
}

.el-table tbody tr:hover {
  background-color: #e8f8b8 !important; /* 悬停时的背景色 */
}

.status-success {
  color: #4caf50 !important; /* 成功状态 */
}

.status-failed {
  color: #f44336 !important; /* 失败状态 */
}
</style>
